<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require("echarts/theme/macarons");
import * as echarts from "echarts";
import { debounce } from "@/utils";

export default {
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
      required: true,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      $_sidebarElm: null,
      $_resizeHandler: null,
    };
  },
  methods: {
    $_sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this.$_resizeHandler();
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize();
      }, 50);
      window.addEventListener("resize", this.$_resizeHandler);
      this.$_sidebarElm =
        document.getElementsByClassName("sidebar-container")[0];
      this.$_sidebarElm &&
        this.$_sidebarElm.addEventListener(
          "transitionend",
          this.$_sidebarResizeHandler
        );
    },
    destroyListener() {
      window.removeEventListener("resize", this.$_resizeHandler);
      this.$_resizeHandler = null;
      this.$_sidebarElm &&
        this.$_sidebarElm.removeEventListener(
          "transitionend",
          this.$_sidebarResizeHandler
        );
    },
    resize() {
      const { chart } = this;
      chart && chart.resize();
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption(this.option);
    },
  },
  watch: {
    option: {
      handler() {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initListener();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  activated() {
    if (!this.$_resizeHandler) {
      this.initListener();
    }
    this.resize();
  },
  beforeDestroy() {
    this.destroyListener();
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  deactivated() {
    this.destroyListener();
  },
};
</script>
